<template>
  <div ref="main" style="width: 500px; height: 300px"></div>
</template>

<script>
export default {
  data() {
    return {
      chars: "",
      xData: [],
      sData: [],
    };
  },
  mounted() {
    this.$bus.on("watchTbData", (res) => {
      //   console.log(res);
      this.xData = [];
      res.forEach((data, index) => {
        this.xData.push(data.name);
        this.sData.push(data.date)
        console.log(this.xData);
        this.init()
      });
    });
        this.init()
  },
  methods: {
    init() {
      this.chars = this.$echarts.init(this.$refs.main);
      let option = {
        xAxis: {
          type: "category",
           data: this.xData
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.sData,
            type: "bar",
          },
        ],
      };
      this.chars.setOption(option);
    },
  },
};
</script>

<style lang="sass" scoped>
</style>